<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/19
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>
<h1>index</h1>
<form method="post" enctype="multipart/form-data"
      action="/upload">

    <input type="file" name="myFile"/>
    <input type="submit" value="tijiao"/>
</form>

<hr/>
<br/><br/><br/>
<form method="post" enctype="multipart/form-data"
      action="/upload2">

    <input type="file" name="myFiles"/>
    <input type="file" name="myFiles"/>
    <input type="submit" value="tijiao"/>
</form>

<hr/>
<br/><br/><br/>
<form method="post" enctype="multipart/form-data"
      action="/upload3">

    <input type="file" name="myFiles"/>
    <input type="file" name="myFiles"/>
    <input type="submit" value="tijiao"/>
</form>

<hr/>
<br/><br/><br/>

<a href="/static/1.jpg">直接下载</a>
<a href="/download/?filename=1.jpg">直接下载2</a>
<a href="/download/?filename=联通.jpg">直接下载3</a>

<hr/>
<br/><br/><br/>
<h1>ajax（axios）上传</h1>

<div id="app">
    <input type="file" ref="myFileRef" name="myFileForAjax"/>
    <input type="button" value="upload" @click="handleUpload"/>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            handleUpload() {
                const file = this.$refs.myFileRef.files[0];
                const data = new FormData();
                data.append('myFile', file);
                data.append("name", "cj");
// 头部可以不用设置的，axios自动给formdata数据添加头部
                axios.post('http://localhost:8080/uploadForAjax2', data, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                }).then(res => {
                    console.log(res);
                    alert(res.data);
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    })
</script>
</body>
</html>
